<template>
  <div class="page-modal">
    <el-dialog
      v-model="dialogVisible"
      title="新建"
      width="30%"
      align-center
      :center="true"
      :destroy-on-close="true"
    >
      <l-form v-bind="modalConfig" v-model="formData"></l-form>
      <!-- 默认插槽 -->
      <slot></slot>
      <!-- dialog自带的插槽 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="handleConfirmClick">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import LForm from '@/base-ui/form/Form.vue'
import { useSystemStore } from '@/store/modules/systems'

const props = defineProps({
  modalConfig: {
    type: Object,
    required: true
  },
  modalInfo: {
    type: Object,
    default: () => ({})
  },
  pageName: {
    type: String,
    required: true
  },
  // 其余的数据
  otherInfo: {
    type: Object,
    default: () => ({})
  }
})

const dialogVisible = ref(false) // 新建数据弹框是否显示
const formData = ref<any>({}) // 默认表单数据
// 这样就可以让表单的数据回显了 通过key值获取value
watch(
  () => props.modalInfo,
  (newValue) => {
    for (const item of props.modalConfig.formItems) {
      formData.value[`${item.field}`] = newValue[`${item.field}`]
    }
  }
)

// 点击确定按钮的逻辑
const handleConfirmClick = () => {
  // 判断 编辑还是新建的确定
  dialogVisible.value = false
  if (Object.keys(props.modalInfo).length) {
    // 一开始传入了一个modalInfo的，如果里面已经有(key)值了(回显那个)，就说明是编辑，否则新建
    // 传入内容然后发请求编辑数据 这里的id是从后端生成返回的
    console.log(`编辑用户`)
    useSystemStore().editPageDataAction({
      pageName: props.pageName,
      editData: { ...formData.value, ...props.otherInfo },
      id: props.modalInfo.id
    })
  } else {
    // 新建
    useSystemStore().createPageDataAction({
      pageName: props.pageName,
      // 传入 menulist 的内容
      newData: { ...formData.value, ...props.otherInfo }
    })
  }
}

// 暴露属性
defineExpose({ dialogVisible })
</script>
<style scoped></style>
